<template>
  <div class="navigate">
    <el-container>
      <el-aside width="220px">
        <el-row class="banner">
          <el-col :span="6">
            <img src="../assets/cloud.png" style="padding-top: 10px; padding-left: 10px"/>
          </el-col>
          <el-col :span="18">
            <div style="padding-top: 18px; color:white" >CMS集成辅助工具</div>
          </el-col>
        </el-row>
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
                    :router="true"
                    :default-active="$route.path"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">C2接口</span>
                    </template>
                    <el-menu-item index="/c2/upstream">上游测试桩</el-menu-item>
                    <el-menu-item index="/c2/downstream">下游测试桩</el-menu-item>
                </el-submenu>
              <el-menu-item index="2" disabled>
                <i class="el-icon-menu"></i>
                <span slot="title">固移融合</span>
              </el-menu-item>
              <el-submenu index="3">
                <template slot="title">
                  <i class="el-icon-menu"></i>
                  <span slot="title">爱奇艺</span>
                </template>
                <el-menu-item index="/iqy/callinterface">接口调用</el-menu-item>
                <el-menu-item index="/iqy/simulation">接口模拟</el-menu-item>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <i class="el-icon-setting"></i>
                  <span slot="title">工具箱</span>
                </template>
                <el-menu-item index="/tools/upgrade">一键升级</el-menu-item>
                <el-menu-item index="4-2">日志监控</el-menu-item>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>
      <el-container>
        <el-header></el-header>
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
    export default {
        name: 'Navigate',
        data(){
            return {

            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            }
        },
        computed : {

        },
        watch: {

        }
    }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .el-header{
    padding: 0;
    background-color: #545c64;
  }
  .el-main {
    color: #333;
    background-color: white;
    height: 1080px;
  }
  .el-menu {
    background-color: #2B3245;
    border-right:0px;
  }

  .banner {
    height: 60px;
    background-color: #434A50;
  }


</style>
